<!-- 任务执行情况 -->
<template>
  <el-dialog :title="titleOption" :visible.sync="dialogTableVisible" @close="$emit('update:visible',false)"
             :close-on-click-modal="false">
    <div class="search_query mb-10">
      <el-input placeholder="用户名" v-model="searchData.realname">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </div>
    <el-table :data="userList"
              height="400"
              @select-all="selectAll"
              @select="selectFnBox"
              tooltip-effect="dark"
              @row-click="rowClickLine"
              ref="multipleTable">
      <el-table-column
          type="selection"
          width="50"
          align="center">
      </el-table-column>
      <el-table-column label="姓名" prop="realname" align="center"></el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="scope">
          {{scope.row.classes?scope.row.classes.class_name:'未记录'}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="pageUserTotal"
        @current-change="handleUserChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="userlistGet('yse')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

export default {
  name: 'taskListDialog',
  props: ['visible', 'userOption'],
  watch: {
    visible () {
      this.dialogTableVisible = this.visible
      if (this.visible) {
        // type 1 授出人 2 被授人
        if (this.userOption.type === 1) {
          this.titleOption = '选择' + this.userOption.realname + '能授出对象'
        } else {
          this.titleOption = '选择' + this.userOption.realname + '能授进人员'
        }

        this.InitFn()
      } else {
        this.applyBookBox = {}
        this.applyBookBoxInit = {}
      }
    }
  },
  data () {
    return {
      dialogTableVisible: this.visible,
      userList: [],
      userPage: 1,
      applyBookBox: {}, // 选中人员信息,缓存分页选择的数据
      applyBookBoxInit: {}, // 本页面对应对象
      pageSize: 20, //  每页的条数
      pageUserTotal: 0,
      searchData: {realname: ''},
      titleOption: ''
    }
  },
  created () {
  },
  methods: {
    InitFn () {
      let _this = this
      this.$fetch(this.api.schedule.scheduleLists, {p: this.userPage, realname: this.searchData.realname, id: this.userOption.id, type: this.userOption.type === 1 ? 0 : 1}).then((response) => {
        console.log('数据：', response)
        if (response.code === 0) {
          this.userList = response.list.data
          this.pageUserTotal = response.list.total
          let applyBookBoxInit = {}
          for (let i = 0; i < response.list.data.length; i++) {
            applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
          }
          this.applyBookBoxInit = applyBookBoxInit
          _this.$nextTick(function () {
            _this.checked() // 每次更新了数据，触发这个函数即可。
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    search () {
      this.InitFn()
    },
    // 点击全选
    selectAll (val) {
      // 全选所有跟空值，即使页面已经选择2项
      let applyBookBox = this.applyBookBox
      if (val.length !== 0) {
        // this.handleSelection = val
        for (let i = 0; i < val.length; i++) {
          if (!applyBookBox[val[i].id]) {
            // 不存在图书
            applyBookBox[val[i].id] = val[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            // 存在图书删除
            delete applyBookBox[this.arryList[i].id]
          }
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
    },
    // 点击单选
    selectFnBox (val) {
      // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
      let applyBookBox = this.applyBookBox
      console.log('单机选项：', val)
      if (val.length !== 0) {
        // 有选项 对本页面的选项进行比对
        let valBox = {}
        for (let i = 0; i < val.length; i++) {
          valBox[val[i].id] = val[i]
        }
        for (let i in this.applyBookBoxInit) {
          if (valBox[i]) {
            // 存在图书删除
            applyBookBox[i] = this.applyBookBoxInit[i]
          } else {
            delete applyBookBox[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i in this.applyBookBoxInit) {
          delete applyBookBox[i]
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
    },
    userlistGet () {
      console.log('applyBookBox:', this.applyBookBox)
      console.log('applyBookBoxInit:', this.applyBookBoxInit)
      // 确认选择
      let applyBookBox = this.applyBookBox
      if (JSON.stringify(applyBookBox) === '{}') {
        this.$alert('请选择需要授权日程的人员！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      } else {
        let userName = ''
        let userId = ''
        for (let i in applyBookBox) {
          userName += applyBookBox[i].realname + ','
          userId += applyBookBox[i].id + ','
        }
        userName = userName.substring(0, userName.length - 1)
        userId = userId.substring(0, userId.length - 1)
        console.log(userName)
        console.log(userId)
        console.log('本人物的执行者：', this.userLine)
        let titleline = '确认添加授出人：' + userName
        let href_ = this.api.schedule.adduser
        let dataOption = {
          user_ids: userId,
          inviter_id: this.userOption.id
        }
        if (this.userOption.type === 2) {
          titleline = '确认添加被授人：' + userName
          href_ = this.api.schedule.adduserInviter
          dataOption = {
            user_id: this.userOption.id,
            inviter_ids: userId
          }
        }
        // this.$message.error('请另选，他已是本任务执行者')
        this.$confirm(titleline, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 请求转派接口 ,转派人员id userId
          this.$post(href_, dataOption).then((response) => {
            console.log('数据：', response)
            if (response.code === 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.dialogTableVisible = false
              this.applyBookBoxInit = {}
              this.$emit('getUser')
            } else {
            }
          }).catch((err) => {
            console.log(err)
          })
        }).catch(() => {
        })
      }
    },
    // 用户人员分页
    handleUserChange (val) {
      this.userPage = val
      this.InitFn()
    },
    rowClickLine (row, column, event) {
      if (this.applyBookBox[row.id]) {
        delete this.applyBookBox[row.id]
      } else {
        this.applyBookBox[row.id] = row
      }
      this.checked() // 每次更新了数据，触发这个函数即可。
    },
    // 设置默认选中
    checked () {
      for (let i = 0; i < this.userList.length; i++) {
        if (this.applyBookBox[this.userList[i].id]) {
          this.$refs.multipleTable.toggleRowSelection(this.userList[i], true)
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.userList[i], false)
        }
      }
    }
  }
}
</script>
